<template>
  <div id="app">
    <div>
      <span>图书名称:</span>
      <input type="text" v-model="todoname" />
    </div>
    <div>
      <button @click="btnAdd" :disabled="bol">添加/修改</button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <todo-header />
        <todo-main
          v-for="item in list"
          :key="item.id"
          :list="item"
          @btn-del="btnDel"
          :istru="istru"
          @btn-edit="BtnEdit"
        />
      </table>
    </div>
  </div>
</template>
<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import axios from 'axios'
axios.defaults.baseURL = 'http://liufusong.top:4000/'
export default {
  data () {
    return {
      list: [],
      todoname: '',
      bol: false,
      istru: false,
      dataa: {
        id: '',
        name: ''
      }
    }
  },
  components: { TodoHeader, TodoMain },
  created () {
    this.getData()
    // this.addDate()
  },
  watch: {
    todoname (val) {
      this.getName(val)
    },
    list () {
      if (this.list.length > 1) {
        this.istru = false
      } else {
        this.istru = true
      }
    }
  },
  methods: {
    async getData () {
      try {
        const res = await axios({
          url: 'books'
        })
        this.list = res.data
        console.log(this.list)
      } catch (err) {
        alert('请求失败')
      }
    },
    async getName (val) {
      try {
        const res = await axios({
          url: 'books/book/' + this.todoname
        })
        if (res.data.status === 1) {
          this.bol = true
        } else {
          this.bol = false
        }
      } catch (err) {
        alert('请求错误！')
      }
    },
    async btnAdd () {
      const isExist = this.list.every((item) => item.id !== this.dataa.id)
      if (this.dataa === '' || isExist) {
        try {
          const res = await axios({
            url: 'books',
            method: 'POST',
            data: {
              name: this.todoname
            }
          })
          console.log(res)
          this.getData()
          this.todoname = ''
        } catch (err) {
          alert('失败！')
        }
      } else {
        console.log(this.dataa.id)
        try {
          const res = await axios({
            url: 'books/' + this.dataa.id,
            method: 'PUT',
            data: { name: this.todoname }
          })
          console.log(res)
          this.getData()
          this.todoname = ''
        } catch (err) {
          alert('修改请求失败！')
        }
      }
    },
    async btnDel (e) {
      if (this.list.length <= 1) {
        return alert('不能删除了！')
      } else {
        console.log(e)
        try {
          const res = await axios({
            url: 'books/' + e,
            method: 'DELETE'
          })
          console.log(res)
          this.getData()
        } catch (err) {
          alert('请求失败')
        }
      }
    },
    async BtnEdit (e) {
      const res = await axios({
        url: 'books/' + e,
        methods: 'GET'
      })
      console.log(res.data)
      this.dataa = res.data
      console.log(this.dataa)
      this.todoname = res.data.name
    }
  }
}
</script>
